<!DOCTYPE HTML>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Demo</title>
  <link rel="stylesheet" href="css/idangerous.swiper.css">
  <script src="js/zepto.js"></script>
  <script src="js/idangerous.swiper.min.js"></script>
  <style>
  	  .device {
	  width: 640px;
	  height: 300px;
	  background: #111;
	  margin: 5px auto;
	  position: relative;
	}
	.swiper-container {
	  height: 300px;
	  width: 640px;
	  cursor: -webkit-grab;
	}


	.pagination {
	  position: absolute;
	  right : 20px;
	  text-align: right;
	  bottom:5px;
	  width: 100%;
	  z-index:10;
	}
	.swiper-pagination-switch {
	  display: inline-block;
	  width: 10px;
	  height: 10px;
	  border-radius: 10px;
	  background: #999;
	  box-shadow: 0px 1px 2px #555 inset;
	  margin: 0 3px;
	  cursor: pointer;
	}
	.swiper-active-switch {
	  background: #fff;
	}
  </style>
  <script>
  	$(function(){
		var mySwiper = new Swiper('.swiper-container',{
			pagination: '.pagination',
			loop:true,
			grabCursor: true,
			paginationClickable: true,
			autoplay : 2000,
			autoplayDisableOnInteraction : false
		  })	
	});
  </script>
</head>
<body>
    <div class="device">
    	<div class="swiper-container">
    		<div class="swiper-wrapper">
    			<div class="swiper-slide" > 
                	<img src="images/slider1-1.png"> 
                </div>
    			<div class="swiper-slide" > 
                	<img src="images/slider1-2.png"> 
                </div>
                <div class="swiper-slide" > 
                	<img src="images/slider1-1.png"> 
                </div>
    			<div class="swiper-slide" > 
                	<img src="images/slider1-2.png"> 
                </div>
    		</div>
    	</div>
    	<div class="pagination"></div>
    </div>
</body>
</html>